<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="persistence.PerformanceVO"%>
<%@page import="persistence.PerformanceEngineDAO"%>
<head>
	<style type="text/css">
            
            .menuitems {
                margin: 5px 0;
                padding: 0;
                width: 710px; /*width of menu*/
                border: 1px solid #9A9A9A;
                border-bottom-width: 0;
                
            }
            
            .menuitems a.item {
                background: black url(img/glossyback.gif) repeat-x bottom left;
                font: bold 11px Verdana, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
                color: white;
                display: block;
                position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
                width: auto;
                padding: 5px 0;
                padding-left: 10px;
                text-decoration: none;
            }
            
            .menuitems a.item:visited, .menuitems .item:active {
                color: white;
            }
            
            .menuitems a.item .statusicon { /*CSS for icon image that gets dynamically added to headers*/
                position: absolute;
                top: 4px;
                right: 5px;
                border: none;
            }
            
            .menuitems a.item:hover {
                background-image: url(img/glossyback2.gif);
            }
            
            .menuitems div.submenu { /*DIV that contains each sub menu*/
                background: white;
            }
            
            .menuitems div.submenu ul { /*UL of each sub menu*/
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            .menuitems div.submenu ul li {
                border-bottom: 1px solid blue;
            }
            
            .menuitems div.submenu ul li a {
                display: block;
                font: normal 10px Verdana, Helvetica, sans-serif;
                color: black;
                text-decoration: none;
                padding: 2px 0;
                padding-left: 10px;
            }
            
            .menuitems div.submenu ul li a:hover {
                background: #DFDCCB;
                color: white;
            }
            
        </style>
	
</head>
<body>

<!-- MENU -->
        <div class="menuitems">
            <a id="menuitem0" class="item submenuheader">Ordine di apertura</a>
            <div id="submenuitem0" style="height:265px; width:705px; status:'close'; diffHeight:0;" class="submenu">
                <ul>
                    <li>
						<iframe src="ordiniapertura.jsp?date=<%=request.getParameter("date")%>" style="width:705px;height:260px;overflow-x:auto;overflow-y:hidden;">
						</iframe>
					</li>
                </ul>
            </div>
            <a id="menuitem1" class="item submenuheader">Posizioni aperte</a>
            <div id="submenuitem1" style="height:270px; width:705px; status:'close'; diffHeight:0;" class="submenu">
                <ul>
                    <li>
						<iframe src="posizioniaperte.jsp?date=<%=request.getParameter("date")%>" style="width:705px;height:260px;overflow-x:auto;overflow-y:hidden;">
						</iframe>
                    </li>
                </ul>
            </div>
            <a id="menuitem2" class="item submenuheader">Operazioni</a>
            <div id="submenuitem2" style="height:270px; width:705px; status:'close'; diffHeight:0;" class="submenu">
                <ul>
                    <li>
						<iframe src="operazioni.jsp?date=<%=request.getParameter("date")%>" style="width:705px;height:260px;overflow-x:auto;overflow-y:hidden;">
						</iframe>
                    </li>
                </ul>
            </div>
            <a id="menuitem3" class="item submenuheader">Ticket</a>
            <div id="submenuitem3" style="height:270px; width:705px; status:'close'; diffHeight:0;" class="submenu">
                <ul>
                    <li>
						<div id="ticket" style="position:absolute; left:50px;">
						<img src="ticket.png"  usemap="#mapTicker">
						<form name="formTicker" method="post" action="/stockblog/performance">							<input type="hidden" name="page" value="menuPerformance"> 							<input type="hidden" name="status" value="buy" >							<input type="hidden" name="date" value="<%=request.getParameter("date")%>" >						<div style="position:absolute; left:30px; top:35px">							<input type="text" name="stock" style="width:69px; border-color:#B3B0B0; font-size:12px; font-weight:bold;">						</div>
						<div style="position:absolute; left:105px; top:34px">							<input type="text" name="descr" style="width:230px; border-color:#B3B0B0; font-size:12px; font-weight:bold; border:0px; font-family='Courier New'; color:#848181;">						</div>
						<div style="position:absolute; left:68px; top:87px">							<input type="text" name="pbuy" style="width:69px; height:18px; border-color:#B3B0B0; font-size:10px">						</div>
						<div style="position:absolute; left:68px; top:107px">							<input type="text" name="book" style="width:69px; height:18px; border-color:#B3B0B0; font-size:10px">						</div>
						<div style="position:absolute; left:51px; top:177px">							<input type="text" name="pstoploss" style="width:57px; height:18px; border-color:#B3B0B0; font-size:10px">						</div>
						<div style="position:absolute; left:51px; top:199px">							<input type="text" name="plimit" style="width:57px; height:18px; border-color:#B3B0B0; font-size:10px">						</div>
						<div style="position:absolute; left:240px; top:127px">							<input type="text" name="dateorder" style="width:85px; height:18px; border-color:#B3B0B0; font-size:10px">						</div>
						
						</form>
						<map id="mapTicker" name="mapTicker">
						<area shape="rect" alt="Send" title="" coords="305,9,337,26" target="" onclick="alerts()"/>
						<area shape="rect" alt="Clear" title="" coords="251,7,298,24" href="" target="" onclick=""/>
						</map>
						</div>

                   </li>
                </ul>
            </div>
            <a id="menuitem4" class="item submenuheader">Chart</a>
            <div id="submenuitem4" style="height:270px; width:705px; status:'close'; diffHeight:0;" class="submenu">
                <ul>
                    <li>
						<iframe src="chart.jsp?date=<%=request.getParameter("date")%>" style="width:705px;height:260px;overflow-x:auto;overflow-y:hidden;">
						</iframe>
                    </li>
                </ul>
            </div>
        </div>
		<br>




<br><br>

<script type="text/javascript">
	function alerts(){
		document.formTicker.submit();
	}
</script>

<script>
	Map = function(){
	    var keys = new Array();
	    var values = new Array();
	    this.get = function(key){
	        return values[keys.indexOf(key)];
	    }
	    this.elementAt = function(index){
	        return values[index];
	    }
	    this.listKeys = function(){
	        return keys;
	    }
	    this.put = function(key, value){
	        var index = keys.indexOf(key);
	        
	        if (index >= 0) {
	            values[index] = value;
	            return;
	        }
	        keys[keys.length] = key;
	        values[values.length] = value;
	    }
	    this.size = function(){
	        return keys.length;
	    }
	    
	    // tipo de formato: "str/str", "str/obj"
	    this.toString = function(format){
	        var delim = "";
	        var txt = "";
	        for (var i = 0; i < keys.length; i++) {
	            if (format == "str/obj") 
	                txt += delim + "\"" + keys[i] + "\":" + values[i];
	            else 
	                txt += delim + "\"" + keys[i] + ":" + values[i] + "\"";
	            
	            delim = ",";
	        }
	        return txt;
	    }
	    //bugfix - only IE not support indexOf
	};			

			
	this.properties = function(){
		this.id = "";
		this.task = null;
		this.heightFix = 0;
		this.diffHeight = 0;
		this.status = "";
		this.count = 0;
	}

	this.Effect = function(){
		var item, differHeight, count;
		var mapSubMenu = new Map();

		this.addListener = function(element, event){
			object = document.getElementById("sub"+element);
			prop = new properties();
			prop.id = "sub" + element; 
			prop.heightFix = object.style["height"];
			prop.diffHeight = (object.style["height"].replace("px","")) / 10;
			mapSubMenu.put(object.id, prop);

			document.getElementById(element)["onclick"] = function(){
				var prop = mapSubMenu.get("sub" + this.id);
				prop.status = (prop.status == "open")?"close": "open";
				scroller(prop.id, prop.status);
			};
		}

		function scroller(id, status){
			var prop = mapSubMenu.get(id);
			prop.diffHeight = document.getElementById(id).style.height.replace("px","") / 10;
			item = document.getElementById(id).getElementsByTagName("li");
			var func = "";
			if (status == "open") {
				prop.count = item.length;
				func = "effect.scrollUp('"+id+"')";
				prop.task = setInterval(func,30);						
				return;
			}
			
			prop.count = -1;
			func = "effect.scrollDown('"+id+"')";
			prop.task = setInterval(func,30);
		}				
		
		this.scrollUp = function(id){
			try{
				var object = document.getElementById(id);
				var prop = mapSubMenu.get(id);
				prop.count--;
				object.style.height = (object.style.height.replace("px","") - prop.diffHeight) + "px";
				if (object.style.height.replace("px","") <= 0) {
					clearInterval(prop.task);
				}
				item[prop.count].style.visibility = "hidden";
			}catch(e){}
		}

		this.scrollDown = function(id){
			try{
				var object = document.getElementById(id);
				var prop = mapSubMenu.get(id);
				prop.count++;
				object.style.height = (parseInt(object.style.height.replace("px","")) + 20) + "px";
				if (object.style.height.replace("px","") >= 260) {
					clearInterval(prop.task);
				}
				item[prop.count].style.visibility = "visible";
			}catch(e){}
		}
	}


	var effect = new Effect();			
	effect.addListener("menuitem0", "onclick", "scroller()");
	effect.addListener("menuitem1", "onclick", "scroller()");
	effect.addListener("menuitem2", "onclick", "scroller()");
	effect.addListener("menuitem3", "onclick", "scroller()");
	effect.addListener("menuitem4", "onclick", "scroller()");
	
</script>

<br>

</body>
</html>